<script setup>
  import Worker from './components/Worker.vue'
  import WorkerMini from './components/WorkerMini.vue'
  import Winner from './components/Winner.vue'
  import useWorker from './hook/useWorker.js'
  const { workers, winner, isEnd, busy, currentWinner, isShowWinner, start, stop, run, clearCache } = useWorker()

  function reset() {
    clearCache()
    nextTick(() => {
      location.reload()
    })
  }
  const log = ref(false)
  function showLog() {
    log.value = !log.value
  }

  onMounted(() => {
    // 监听键盘是否按下空格
    window.onkeyup = (e) => {
      console.log(e, e.code)
      if (e.code === 'Space') {
        run()
      }
    }

    console.log('onMounted')
  })
</script>

<template>
  <div class="h-screen flex flex-col justify-center relative">
    <!-- 操作区域 -->
    <div class="fixed bottom-2 right-2 z-10">
      <div class="flex flex-col items-center gap-2">
        <button
          class="transition w-16 py-2 rounded-lg bg-black/20 hover:bg-black/80 flex items-center justify-center"
          @click.stop="showLog"
          v-if="winner.length"
        >
          <span class="text-slate-400/50 text-sm">{{ winner.length }}/{{ workers.length }}</span>
        </button>

        <button
          class="transition text-white w-16 h-16 flex items-center justify-center rounded-full cursor-pointer"
          :class="[
            busy ? 'bg-orange-600/80 hover:bg-orange-600' : 'bg-indigo-600/80 hover:bg-indigo-600',
            isEnd ? 'bg-slate-600/80 hover:bg-slate-600' : '',
          ]"
          @click.stop="run"
        >
          <template v-if="isEnd"> 结束 </template>
          <template v-else>
            {{ busy ? '停止' : '开始' }}
          </template>
        </button>
      </div>
    </div>

    <!-- 选中列表 -->
    <div class="absolute top-2 left-2 h-3/4 overflow-auto z-10 bg-indigo-500 rounded-lg" v-if="log">
      <div class="flex flex-col" v-if="winner.length">
        <div class="text-white/50 text-base p-2 bg-black/20 text-center rounded-t-lg">
          <span class="text-sm text-slate-400">{{ winner.length }} / {{ workers.length }}</span>
        </div>
        <div class="overflow-auto p-2 pr-3">
          <div v-for="item in winner" :key="item" class="text-white p-2">
            <WorkerMini :data="item" />
          </div>
        </div>
      </div>
    </div>

    <div class="flex-1 flex gap-4 p-4 shrink-0 overflow-hidden">
      <!-- 奖池 -->
      <div class="bg-black/5 flex-1 relative text-white rounded-lg flex flex-col justify-center overflow-auto">
        <div class="max-h-full">
          <transition-group class="grid gap-4 grid-cols-[repeat(auto-fill,minmax(7vw,1fr))] p-8" name="fade" tag="div">
            <div
              v-for="(item, i) in workers"
              :key="item"
              :class="[!busy && !currentWinner ? `saturate-50 drop-shadow-lg animate-pulse1` : '', busy ? 'drop-shadow-md' : '']"
            >
              <Worker :data="item" />
            </div>
          </transition-group>
        </div>
        <!-- 当前中奖信息 -->
        <Transition name="modal">
          <div
            class="absolute top-0 left-0 w-full h-full rounded-lg modal"
            :class="[busy || !currentWinner ? '' : 'bg-black/5 backdrop-blur-lg']"
            @click="run"
            v-if="isShowWinner"
          >
            <div class="space-y-4 flex items-center justify-center flex-col h-full modal-container" v-if="!busy" @click.stop>
              <div class="yh absolute inset-0 opacity-20"></div>
              <div class="relative" v-if="currentWinner">
                <div
                  class="text-white text-center flex flex-col items-center gap-16 border border-indigo-500/50 shadow-lg relative z-10"
                  :class="[currentWinner.video ? 'p-2 bg-indigo-500/50 rounded-lg' : 'p-2 bg-indigo-500/50 rounded']"
                >
                  <!-- <div class="text-6xl bg-green-500/20 p-4 rounded-lg animate-bounce shadow-md backdrop-blur-sm">
                    {{ currentWinner?.name }}
                  </div> -->
                  <video class="w-96 h-auto" v-if="currentWinner.video" :src="`./worker/${currentWinner.video}`" controls autoplay></video>
                  <div class="" v-else>
                    <Winner :data="currentWinner" />
                  </div>
                </div>
                <!-- <div
                  class="absolute top-0 left-0 w-full h-full text-center flex items-center justify-center z-0 overflow-hidden rounded-lg yh"
                ></div> -->
              </div>
              <template v-if="isEnd">
                <span class="drop-shadow-md bg-black/20 text-lg text-slate-500 px-4 py-2 rounded-lg backdrop-blur">已结束</span>
              </template>
            </div>
          </div>
        </Transition>
      </div>
    </div>

    <div class="fixed bottom-0 left-0 z-10">
      <div class="text-center text-white/5 text-xs p-2" v-if="winner.length" @click="reset">powered by 酒菜儿</div>
    </div>
  </div>
</template>

<style lang="scss">
  html,
  body {
    @apply bg-gradient-to-br from-sky-900 via-indigo-900 to-yellow-900;
  }

  .yh {
    // background: url('/yh2.gif') repeat center center / 50%;
    background: url('https://tos.learningmall.cn/components_images/1hktdockal4o.gif') no-repeat center center / cover;
  }

  /* 1. 声明过渡效果 */
  .fade-move,
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.8s;
  }

  /* 2. 声明进入和离开的状态 */
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
    // transform: scaleY(0.01) translate(30px, 0);
  }

  /* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
  .fade-leave-active {
    position: absolute;
  }

  // modal

  .modal-enter-from {
    opacity: 0;
  }

  .modal-leave-to {
    opacity: 0;
  }

  .modal-enter-from .modal-container,
  .modal-leave-to .modal-container {
    transform: scale(1.1) translateY(10vw);
  }

  .modal {
    transition: opacity 0.2s ease;
  }

  .modal-container {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
</style>
